<template>
  <div>
    <div class="details-top">
      <div class="w top-w">
        <img
            :src="ticket.coverImg" alt="项目海报">
        <div class="w-xinxi">  <!-- 项目详情 -->
          <p class="cc-title">{{ ticket.name }}</p>
          <p>时间：<span class="cc-time">{{ ticket.dateTime }}</span></p>
          <p>场馆：<span class="cc-changguan">{{ ticket.venueName }}</span></p>
        </div>
      </div>

    </div>
    <div class="l-fenlei">
      <div>
        <span class="fenlei-xz">余票:</span>
        <ul class="xz-changci xz-changci1">
          {{ ticket.concertTotal }} 张
        </ul>
        <div class="xz-zhankai" onclick="zhankaidizhi1(this)">
          <div>展开场次</div>
          <span class="ico"></span>
        </div>
        <div class="xz-shouqi" onclick="shouqidizhi1(this)">
          <div>收起场次</div>
          <span class="ico"></span>
        </div>
      </div>
      <div class='rapid'>
        <span class="fenlei-xz" @click="get_total_price()">选择数量:</span>
        <ul class="xz-quantity">
          <img src="../../static/images/加号.png" style="cursor: pointer" @click="count++;get_total_price()" alt="">
          <li @click="get_total_price()">{{ count }}张</li>
          <img src="../../static/images/减号.png" style="cursor: pointer" @click="count--;get_total_price()" alt="">
        </ul>
      </div>
      <div class='rapid'>
        <span class="fenlei-xz">合计:</span>
        <div class="xz-priceInfo money">{{ total_price }}￥</div>
      </div>

      <div class='rapid'>

        <div class="changcilb-lb changcilb-lb2">
          <img src="../../assets/alipay.png" class="alipayImg" alt="支付宝支付">
          <span
              class="lb-goumai2 lb-goumai3" @click="generate_order()"
              style="position:relative;bottom:10px;right: 10px">立即购买</span>
        </div>

      </div>
      <!--<div id="venusMap" style="display:none"></div>-->
      <div class="l-xiangqing">
        <!-- 文字详情 -->
        <div class="l-gmshuoming" id="xz1">
          <div class="xiangqing-top">
            <span></span>
            购票说明
          </div>
          <ul>
            <li>选择演出</li>
            <i class="iconfont i-ico coc4">&#xe618;</i>
            <li>确认订单信息</li>
            <i class="iconfont i-ico coc4">&#xe618;</i>
            <li>选择配送方式</li>
            <i class="iconfont i-ico coc4">&#xe618;</i>
            <li>选择支付方式</li>
            <i class="iconfont i-ico coc4">&#xe618;</i>
            <li>完成购票</li>
          </ul>
        </div>
        <div class="l-gmtishi" id="xz2">
          <div class="xiangqing-top">
            <span></span>
            购票提示
          </div>
          <div class="noticecon">
            <p>
              1.演出票品为特殊商品，除不可抗力因素导致演出取消外，订单不支持退换，可在平台转售；
              2.演出详情仅供参考，具体以主办方公布信息及现场为准，请准时到场以免错过演出；
              3.有票官方确保售出票品真实有效，请放心购买；
              4.根据演出火爆情况，有票平台可能会将您所选的快递送票、上门自取等取票方式调整为现场取票，敬请谅解；
              5.平台会尽力促使卖家履行交易协议，如果卖家付票过程中发生问题，本平台可协调相同或更高票挡的票品代替，否则平台将全额退款并按订单上约定的赔付方式与金额向用户进行赔付；
              6.为了安全起见需要本人签收，演出快递票均为快递费到付(不包邮)，请知晓！ </p>
          </div>
        </div>
        <!--     #TODO 拓展   -->
        <!--        <div class="l-gmtishi" id="xz3">-->
        <!--          <div class="xiangqing-top">-->
        <!--            <span></span>-->
        <!--            演出详情-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "TicketDetail",
  data() {
    return {
      id: this.$route.query.id,
      ticket: {},
      count: 1,
      total_price: 0,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  methods: {
    load() {
      this.request.get("/concert/front/ticketDetail/" + this.id).then(res => {
        this.ticket = res.data
        this.get_total_price()
      })
    },
    get_total_price() {
      if (this.count < 1) {
        this.$message.warning("最低购买数量不能低于1哦!!")
        this.count = 1;
      }
      this.total_price = this.ticket.price * this.count
    },
    generate_order() {
      this.request.post("/user/order/generate", {
        userId: this.user.id,
        ticketId: this.ticket.ticketId,
        ticketTotal: this.count,
      }).then(res => {
        const order = res.data
        this.$message.success("订单已提交")
        this.$router.push("/front/order")
        window.open("http://localhost:9090/alipay/pay?subject=" + this.ticket.concert.name + "&traceNo=" + order.orderNo + "&totalAmount=" + order.totalPrice)
      })

    },

  },
  created() {
    this.load();
  }
}
</script>
<style src="../../static/css/common.css" scoped></style>
<style src="../../static/css/projectdetails.css" scoped></style>
<style src="../../static/css/venusmap.css" scoped></style>
<style scoped>
.alipayImg {
  width: 100px;
  position: relative;
  bottom: 15px;
}
</style>